import 'package:auto_route/auto_route.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:material_symbols_icons/get.dart';
import 'package:window_manager/window_manager.dart';

import 'TopicListPage.dart';

class MainFrame extends StatefulWidget {
  const MainFrame({super.key});

  @override
  State<StatefulWidget> createState() {
    return MainFrameState();
  }
}

class MainFrameState extends State<MainFrame> {
  double width = 300;
  double default_divider_width = 1;
  double hover_divider_width = 5;
  bool isHover = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: CachedNetworkImageProvider(
            'https://plus.unsplash.com/premium_photo-1734543932038-6bb3d024f5a0?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
          ),
          fit: BoxFit.cover,
          opacity: 0.6,
        ),
      ),
      child: Column(
        children: [
          DragToMoveArea(
            child: SizedBox(
              height: 40,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Container(
                    color: Colors.red,
                    height: 40,
                    width: 40,
                    child: Icon(
                      SymbolsGet.get('apparel', SymbolStyle.outlined),
                      size: 30,
                      color: Colors.black,
                    ),
                  ),
                  Icon(
                    SymbolsGet.get('minimize', SymbolStyle.outlined),
                    size: 30,
                    color: Colors.black,
                  ),
                  Icon(
                    SymbolsGet.get('crop_square', SymbolStyle.outlined),
                    size: 30,
                    color: Colors.black,
                  ),
                  Icon(
                    SymbolsGet.get('close', SymbolStyle.outlined),
                    size: 30,
                    color: Colors.black,
                  )
                ],
              ),
            ),
          ),
          Expanded(
            child: Row(
              children: [
                SizedBox(width: width, child: const TopicListPage()),
                MouseRegion(
                  onEnter: (_) {
                    setState(() {
                      isHover = true;
                    });
                  },
                  onExit: (_) {
                    setState(() {
                      isHover = false;
                    });
                  },
                  cursor: SystemMouseCursors.move,
                  child: GestureDetector(
                    onHorizontalDragUpdate: (detail) {
                      var dx = detail.delta.dx;
                      setState(() {
                        width += dx;
                      });
                    },
                    child: VerticalDivider(
                      color: Colors.red.withOpacity(0.1),
                      width: 15,
                      indent: 100,
                      endIndent: 100,
                      thickness:
                          isHover ? hover_divider_width : default_divider_width,
                    ),
                  ),
                ),
                const Expanded(child: AutoRouter())
              ],
            ),
          ),
        ],
      ),
    );
  }
}
